<template>
  <div class="process-routing">
    <el-card class="header-card">
      <div class="page-header">
        <div class="header-left">
          <h2>
            <el-icon><Share /></el-icon>
            工艺路线管理
          </h2>
          <p>定义产品的生产工艺流程和加工路线</p>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="showAddDialog">
            <el-icon><Plus /></el-icon>
            新建工艺路线
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 搜索筛选 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="工艺编码">
          <el-input v-model="searchForm.routingCode" placeholder="请输入工艺编码" clearable />
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="启用" value="active" />
            <el-option label="停用" value="inactive" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table :data="tableData" stripe border v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="routingCode" label="工艺编码" width="150" fixed />
        <el-table-column prop="routingName" label="工艺名称" min-width="200" />
        <el-table-column prop="productName" label="适用产品" width="180" />
        <el-table-column prop="version" label="版本号" width="100" align="center" />
        <el-table-column prop="processCount" label="工序数量" width="100" align="center">
          <template #default="{ row }">
            <el-tag>{{ row.processCount }} 道</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="standardTime" label="标准工时(h)" width="120" align="right" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column label="操作" width="260" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleView(row)">查看</el-button>
            <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="success" size="small" @click="handleCopy(row)">复制</el-button>
            <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="pagination"
      />
    </el-card>

    <!-- 新建/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1200px">
      <el-form :model="formData" ref="formRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="工艺编码">
              <el-input v-model="formData.routingCode" placeholder="自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工艺名称">
              <el-input v-model="formData.routingName" placeholder="请输入工艺名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用产品">
              <el-select v-model="formData.productId" placeholder="请选择产品" filterable>
                <el-option label="产品A" value="1" />
                <el-option label="产品B" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">工序列表</el-divider>
        <el-button type="primary" size="small" @click="addProcess" style="margin-bottom: 10px">
          <el-icon><Plus /></el-icon> 添加工序
        </el-button>

        <el-table :data="formData.processes" border>
          <el-table-column prop="seq" label="序号" width="80" align="center" />
          <el-table-column label="工序名称" width="200">
            <template #default="{ row }">
              <el-input v-model="row.processName" placeholder="请输入工序名称" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="工作中心" width="150">
            <template #default="{ row }">
              <el-select v-model="row.workCenter" placeholder="选择" size="small">
                <el-option label="车间A" value="A" />
                <el-option label="车间B" value="B" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="标准工时(h)" width="130">
            <template #default="{ row }">
              <el-input-number v-model="row.standardTime" :min="0" :step="0.5" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="准备时间(h)" width="130">
            <template #default="{ row }">
              <el-input-number v-model="row.setupTime" :min="0" :step="0.5" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="工序说明" min-width="200">
            <template #default="{ row }">
              <el-input v-model="row.description" placeholder="请输入工序说明" size="small" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="{ $index }">
              <el-button link type="danger" size="small" @click="removeProcess($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Share, Plus, Search } from '@element-plus/icons-vue'

const searchForm = reactive({
  routingCode: '',
  productName: '',
  status: ''
})

const tableData = ref([])
const loading = ref(false)

const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const dialogVisible = ref(false)
const dialogTitle = ref('新建工艺路线')
const formRef = ref(null)

const formData = reactive({
  routingCode: '',
  routingName: '',
  productId: '',
  processes: []
})

const fetchData = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        id: '1',
        routingCode: 'RT001',
        routingName: '产品A标准工艺',
        productName: '产品A',
        version: 'V1.0',
        processCount: 5,
        standardTime: 8.5,
        status: 'active',
        creator: '张三',
        createTime: '2025-01-01 10:00:00'
      },
      {
        id: '2',
        routingCode: 'RT002',
        routingName: '产品B标准工艺',
        productName: '产品B',
        version: 'V2.0',
        processCount: 4,
        standardTime: 6.0,
        status: 'active',
        creator: '李四',
        createTime: '2025-01-02 14:00:00'
      }
    ]
    pagination.total = 2
    loading.value = false
  }, 500)
}

const handleSearch = () => {
  pagination.page = 1
  fetchData()
}

const handleReset = () => {
  Object.assign(searchForm, { routingCode: '', productName: '', status: '' })
  handleSearch()
}

const handleSizeChange = (size) => {
  pagination.size = size
  fetchData()
}

const handlePageChange = (page) => {
  pagination.page = page
  fetchData()
}

const showAddDialog = () => {
  dialogTitle.value = '新建工艺路线'
  Object.assign(formData, {
    routingCode: 'RT' + Date.now(),
    routingName: '',
    productId: '',
    processes: []
  })
  dialogVisible.value = true
}

const handleView = (row) => {
  ElMessage.info('查看工艺路线：' + row.routingCode)
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑工艺路线'
  dialogVisible.value = true
}

const handleCopy = (row) => {
  ElMessage.success('复制成功')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该工艺路线吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    fetchData()
  })
}

const addProcess = () => {
  formData.processes.push({
    seq: formData.processes.length + 1,
    processName: '',
    workCenter: '',
    standardTime: 1,
    setupTime: 0.5,
    description: ''
  })
}

const removeProcess = (index) => {
  formData.processes.splice(index, 1)
  // 重新编号
  formData.processes.forEach((item, idx) => {
    item.seq = idx + 1
  })
}

const handleSubmit = () => {
  ElMessage.success('保存成功')
  dialogVisible.value = false
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.process-routing {
  padding: 20px;

  .header-card {
    margin-bottom: 20px;
    
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        h2 {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 0 0 10px 0;
          font-size: 24px;
          color: #303133;
        }

        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    .pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
}
</style>

